<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :to="{ path: '/' }"
            v-show="item.path == '/index' ? false : true"> 首页
        </el-breadcrumb-item>
        <div>
            <el-breadcrumb-item v-for="(item, index) in breadcrumbList" v-show="item.path == '/index' ? false : true"
                :key="index" :to="{ path: item.path }">{{
                    item.meta.name }}
                <span class="no-redirect">{{
                    item.meta.parentTitle
                }}</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: item.path }" v-for="item in breadcrumbList" :key="item.title">{{
                item.meta.title }}
            </el-breadcrumb-item>
        </div>
    </el-breadcrumb>
</template>


<script setup lang="ts">
import { treeEmits } from 'element-plus/es/components/tree-v2/src/virtual-tree';
import { defineProps, withDefaults, watch, defineEmits, ref } from 'vue'
import { useRoute } from 'vue-router'
let router = useRoute()
const breadcrumbList: any = ref([])
const initBreadcrumbList = () => {
    breadcrumbList.value = router.matched.filter(
        (item) => item.meta && item.meta.title
    )


    // 当前路由的完整路由表
    // console.log(breadcrumbList)
}
watch(
    () => router.path,
    () => {
        initBreadcrumbList()
    },
    { deep: true, immediate: true }


)
</script>


<style lang="scss" scoped>
.el-breadcrumb {
    line-height: 50px;
}
</style>